<div class="gallery_addon">
	<div id="pagina_top">
		<div class="right">{pp:Pagina("count":"{@pp:pagina_count}", "active":"{@pp:pagina_active}", "url":"JavaScript:loadGallery('{page}');")}</div>
	</div>
	<div class="h_sep" id="admin_top_hr" style="margin: 5px -5px 5px -5px;">
		<span class="left">&nbsp;</span>
		<span class="right">&nbsp;</span>
		<span class="center">&nbsp;</span>
	</div>
	<div id="album_div">
		<pp:dynamic name="no_images"><div id="no_images">Noch keine Bilder vorhanden</div></pp:dynamic>
		<pp:dynamic name="images">
			<!-- do not change ids or classes - used by scripts -->
			<div class="image" id="image-{@pp:id}">
				<div class="img_wrapper_main">
					<div class="img_wrapper">
						<a href="javascript:void(0);" onclick="selectImage({@pp:id}, '{@pp:path}'); {@pp:clickAction}" onmouseover="$('#images_delete_{@pp:id}').show();" onmouseout="$('#images_delete_{@pp:id}').hide();">
							<pp:dynamic name="offline">
								<div class="offline">Versteckt</div>
							</pp:dynamic>
							<pp:dynamic name="main_image">
								<div class="main_image">Hauptbild</div>
							</pp:dynamic>
							<span class="images_delete_action" id="images_delete_{@pp:id}">
								<img src="{@pp:abs_root}{@pp:tpl_folder}/img/services/gallery/addon/action_delete2.png" onclick="deleteImage({@pp:id});"/>
							</span>
							<img src="{@pp:root}_core/getImage.php?path={@pp:path}&height=80&width=80" class="img"/>
						</a>	
					</div>
				</div>
			</div>
		</pp:dynamic>
	</div>
</div>
<div class="h_sep" id="admin_top_hr" style="margin: 5px -5px 0px -5px;">
	<span class="left">&nbsp;</span>
	<span class="right">&nbsp;</span>
	<span class="center">&nbsp;</span>
</div>
<div id="gallery_addon_actions">
	<ul id="gallery_addon_actions_ul_enabled">
		<li id="gallery_addon_actions_delete"><a href="javascript:void(0);" onclick="deleteActiveImage();" title="L&ouml;schen" alt="L&ouml;schen" class="link">L&ouml;schen</a></li>
		<!-- <li id="gallery_addon_actions_main_image"><a href="javascript:void(0);" onclick="setMainImage();" title="Hauptbild" alt="Hauptbild"class="link">Hauptbild</a></li>-->
		<li id="gallery_addon_actions_hide"><a href="javascript:void(0);" onclick="hideImage();" title="Verstecken" alt="Verstecken"class="link">Verstecken</a></li>
		<pp:dynamic name="use_activated"><li id="gallery_addon_actions_use"><a href="javascript:void(0);" onclick="activateUseFunction();" title="Verwenden" alt="Verwenden" class="link">Verwenden</a></li></pp:dynamic>
	</ul>
	<ul id="gallery_addon_actions_ul_show_enabled">
		<li id="gallery_addon_actions_delete"><a href="javascript:void(0);" onclick="deleteActiveImage();" title="L&ouml;schen" alt="L&ouml;schen" class="link">L&ouml;schen</a></li>
		<!-- <li id="gallery_addon_actions_main_image"><a href="javascript:void(0);" onclick="setMainImage();" title="Hauptbild" alt="Hauptbild"class="link">Hauptbild</a></li> -->
		<li id="gallery_addon_actions_show"><a href="javascript:void(0);" onclick="showImage();" title="Anzeigen" alt="Anzeigen"class="link">Anzeigen</a></li>
		<pp:dynamic name="use_activated1"><li id="gallery_addon_actions_use"><a href="javascript:void(0);" onclick="activateUseFunction();" title="Verwenden" alt="Verwenden" class="link">Verwenden</a></li></pp:dynamic>
	</ul>
	<ul id="gallery_addon_actions_ul_disabled">
		<li id="gallery_addon_actions_delete"><span class="link">L&ouml;schen</span></li>
		<!-- <li id="gallery_addon_actions_main_image"><span class="link">Hauptbild</span></li>-->
		<li id="gallery_addon_actions_hide"><span class="link">Verstecken</span></li>
		<pp:dynamic name="use_activated_wo_links"><li id="gallery_addon_actions_use"><span class="link">Verwenden</span></li></pp:dynamic>
	</ul>
</div>
<style type="text/css" media="screen">
	@import url({@pp:abs_root}{@pp:tpl_folder}/css/services/gallery_addon.css);
</style>
<script type="text/javascript">
	$('#gallery_addon').ready(function () { old_select = undefined; updateActions(-1);});
	
	var old_select, active_path;
	
	function selectImage(id, path){
		if(old_select != undefined) $('#image-'+old_select).removeClass('selected');
		if(old_select != id) {
			$('#image-'+id).addClass('selected');
			old_select = id;
			active_path = path;
		} else {
			old_select = undefined;
			active_path = undefined;
		}

		updateActions(id);
	}

	function deleteActiveImage() { if(old_select != undefined) deleteImage(old_select); };

	function activateUseFunction() {
		if(old_select != undefined) {@pp:useFunction}(old_select);
	}
	
	function updateActions(id){
		if(old_select == undefined) {
			$('#gallery_addon_actions_ul_disabled').show();
			$('#gallery_addon_actions_ul_enabled').hide();
			$('#gallery_addon_actions_ul_show_enabled').hide();
		} else {
			if($('#image-'+id+' > div > div > a > .offline').length == 0) {
				$('#gallery_addon_actions_ul_disabled').hide();
				$('#gallery_addon_actions_ul_enabled').show();
				$('#gallery_addon_actions_ul_show_enabled').hide();
			} else {
				$('#gallery_addon_actions_ul_disabled').hide();
				$('#gallery_addon_actions_ul_enabled').hide();
				$('#gallery_addon_actions_ul_show_enabled').show();
			}
		}
	}

	function setMainImage(){
		if(old_select != undefined){
			showImageLoadingDiv();
			getService('Gallery', 'run', 'args[action]=set_folder_thumb&args[id]={@pp:folder_id}&args[thumb]='+old_select, 
				function (msg) {
					hideImageLoadingDiv();
					{@pp:reloadFunction}
				});
		}
	}

	function deleteImage(id) {
		showImageLoadingDiv();
		getService('Gallery', 'run', 'args[action]=delete_image&args[id]='+id, 
				function (msg) {
					hideImageLoadingDiv();
					{@pp:reloadFunction}
				});
	}

	function showImage() {
		if(old_select != undefined){
			showImageLoadingDiv();
			getService('Gallery', 'run', 'args[action]=show_image&args[id]='+old_select, 
				function (msg) {
					hideImageLoadingDiv();
					{@pp:reloadFunction}
				});
		}
	}
	function hideImage() {
		if(old_select != undefined){
			showImageLoadingDiv();
			getService('Gallery', 'run', 'args[action]=hide_image&args[id]='+old_select, 
				function (msg) {
					hideImageLoadingDiv();
					{@pp:reloadFunction}
				});
		}
	}
</script>